@import '../basic/globalVar.scss';
@import '../mixins/index.scss';

@mixin selectSize($size) {
  $font-size: $--font-size-default;
  $height: $--height-default;
  $tag-height: $--tag-height-default;
  @if ($size == 'large') {
    $font-size: $--font-size-large;
    $height: $--height-large;
    $tag-height: $--tag-height-large;
  } @else if ($size == 'small') {
    $font-size: $--font-size-small;
    $height: $--height-small;
    $tag-height: $--tag-height-small;
  } @else if ($size == 'mini') {
    $font-size: $--font-size-mini;
    $height: $--height-mini;
    $tag-height: $--tag-height-mini;
  }
  font-size: $font-size;
  @include ci(select-reference) {
    font-size: $font-size;
    &--multiple {
      height: auto;
      min-height: $height;
    }
    &__multiple-input {
      height: #{$height - 2px};
      font-size: $font-size;
    }
    &__multiple-tag {
      height: #{$tag-height - 4px};
      line-height: #{$tag-height - 6px};
      margin-top: #{($height - ($tag-height - 2px)) / 2};
      margin-bottom: #{($height - ($tag-height - 2px)) / 2};
    }
    &__suffix {
      font-size: $font-size;
    }
  }
}
@include classNameConnect(select) {
  display: inline-block;
  width: 100%;
  line-height: $--line-height-default;
  vertical-align: top;
  @include el(reference) {
    outline: none;
    user-select: none;
  }
  @include el(drop-inner) {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: $--border-default;
    border-radius: $--border-radius-default;
    box-shadow: $--box-shadow-default;
    background-color: $--color-white;
    padding: 5px 0;
  }
  @include el(empty) {
    box-sizing: border-box;
    text-align: center;
    padding: 7px 16px;
    font-size: $--select-option-font-size;
    color: $--color-text-empty;
    @include utils-ellipsis();
  }
  @include el(loading) {
    box-sizing: border-box;
    text-align: center;
    padding: 7px 16px;
    font-size: $--select-option-font-size;
    color: $--color-text-empty;
    @include utils-ellipsis();
    & > i {
      margin-right: 10px;
    }
  }
  @include b(large) {
    @include selectSize(large);
  }
  @include b(default) {
    @include selectSize(default);
  }
  @include b(small) {
    @include selectSize(small);
  }
  @include b(mini) {
    @include selectSize(mini);
  }
}
@include classNameConnect(option) {
  display: block;
  width: 100%;
  padding: 7px 16px;
  position: relative;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
  font-size: $--select-option-font-size;
  color: $--select-option-text-color;
  transition: all $--animation-time ease-in-out;
  background-color: $--color-white;
  @include when(selected) {
    color: $--color-primary;
    //background-color: $--background-color-hover;
  }

  @include el(text) {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    @include utils-ellipsis();
  }

  @include el(multiple) {
    padding-right: $--select-option-padding-right-mutiple;
    @include when(selected) {
      background-color: transparent;
    }
  }

  @include el(icon) {
    position: absolute;
    right: #{$--select-option-padding-right-mutiple / 2};
    top: 50%;
    transform: translateY(-50%);
    color: $--color-primary;
  }

  @include when(hover) {
    background-color: $--background-color-hover;
  }

  @include when(disabled) {
    cursor: not-allowed;
    color: $--color-text-disabled;
    background-color: transparent;
  }

  &.is-disabled.is-selected {
    color: $--color-primary;
    background-color: transparent;
  }
}
@include classNameConnect(option-group) {
  display: block;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  text-align: left;
  cursor: default;
  //line-height: normal;
  //font-size: $--select-option-font-size;
  color: $--select-option-text-color;
  transition: all $--animation-time ease-in-out;
  background-color: $--color-white;
  @include utils-ellipsis();
  @include el(title) {
    padding: 7px 16px;
    color: $--color-text-des;
  }
  @include el(wrap) {
    @include ci(option) {
      padding-left: 32px;
      padding-right: 32px;
    }
  }
}
@include classNameConnect(select-reference) {
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: 100%;
  vertical-align: middle;
  @include b(multiple) {
    outline: none;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    vertical-align: middle;
    position: relative;
    display: inline-block;
    border-radius: $--border-radius-default;
    background-color: $--color-white;
    border: $--border-default;
    padding-left: $--input-padding-horizontal-default;
    padding-right: $--select-suffix-width;
    padding-top: 0;
    padding-bottom: 0;
    font-size: $--font-size-default;
    color: $--color-text-default;
    transition: all $--animation-time ease-in-out;
  }
  @include b(focus) {
    border-color: $--color-primary;
    box-shadow: 0 0 0 2px
      mix($--color-primary, $--color-white, $--button-hover-percent);
  }
  @include b(hover) {
    border-color: $--color-primary;
  }
  @include b(disabled) {
    background-color: $--background-color-disabled;
    border-color: $--border-color-disabled;
    color: $--color-text-disabled;
    cursor: not-allowed;

    @include el((multiple-input, multiple-tag), false) {
      cursor: not-allowed;
      color: $--color-text-disabled;
    }
  }
  @include el(input) {
    input {
      cursor: pointer;
    }
  }
  @include el(suffix) {
    position: absolute;
    right: 1px;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    width: $--select-suffix-width;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @include el(suffix-icon) {
    transition: all $--animation-time ease-in-out;
  }
  @include el(suffix-icon-rotate) {
    @include utils-rotate();
  }
  @include el(multiple-tag, false) {
    outline: none;
    display: inline-block;
    text-align: left;
    box-sizing: border-box;
    overflow: hidden;
    margin-left: 0;
    margin-right: 5px;
    vertical-align: middle;
  }
  @include el(multiple-input) {
    border: none;
    outline: none;
    max-width: 100%;
    //min-width: 32px;
    background-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
    vertical-align: middle;
    //font-size: $--font-size-default;
    color: $--color-text-default;
    //height: #{$--height-default - 10px};

    &::placeholder {
      color: $--color-text-placeholder;
    }
  }
}
